<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :row-key="tree.row_id"
      :tree-props = "tree.tree_props"
      style="width: 100%; font-size: 12px"
      size="mini"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in columns">
        <el-table-column
          v-if="item.type && item.type === 'selection'"
          v-bind="item"
          :key="index"
        ></el-table-column>
        <el-table-column v-else-if="!item.type" v-bind="item" :key="index"></el-table-column>
        <el-table-column :key="index" v-else-if="item.type" v-bind="item">
          <template slot-scope="scope">
            <template v-for="(item, index) in item.list">
              <div :key="index">
                <el-button v-bind="item" @click="handleAction(item.action,scope.row)">{{ item.text }}</el-button>
              </div>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination @current-change="val=>$emit('handleCurrentChange',val)" :page-size ="pager.pageSize" background layout="prev, pager, next" :total="pager.total"></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
      tree: {
      type : Object,
      default : {}
    },
    tableData: {
      type: Array,
      dafault: [],
    },
    columns: {
      type: Array,
      default: [],
    },
    pager: {
      type: Object,
      dafault: {},
    },
  },
  methods: {
    handleAction(action,row) {
      this.$emit('handleAction',{action,row})
    },
    handleSelectionChange(row) {
      this.$emit('handleSelectionChange',row)
    },
  },
};
</script>

<style>

</style>
